<template>
	<view>
		<u-navbar
			title="支付结果"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view style="padding: 32rpx;text-align: center;">
				<view style="height: 160rpx;"/>
				<view style="display: flex;justify-content: center;align-items: center;">
					<u-icon size="56" :color="appColor" name="checkmark-circle-fill"></u-icon>
				</view>
				<view style="height: 60rpx;"/>
				<view class="pay-title">支付成功</view>
				<view style="height: 60rpx;"/>
				<u-button @click="continueOrder" shape="circle" :color="appColor" text="继续认养"></u-button>
				<!-- <u-button @click="checkOrder" shape="circle" :color="appColor" text="查看订单"></u-button> -->
				<view style="height: 32rpx;"/>
				<u-button shape="circle" text="返回首页" @click="backHome"></u-button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				id: null
			}
		},
		computed: {
			scrollViewHeight() {
				return this.scrollHeight - 50 - 44 + 'px';
			},
			appColor() {
				return this.appPrimaryColor
			},
		},
		onLoad({id}) {
			this.id = id;
		},
		methods: {
			...mapActions(['setActiveTabbar']),
			backHome() {
				this.setActiveTabbar({activeTabbar: 'home'});
				this.$nextTick(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				})
			},
			// 查看订单
			checkOrder() {
				this.$cuNavigateTo(`/pages/me/fosterOrderDetail?id=${this.id}&index=0`)
			},
			// 继续认养
			continueOrder() {
				this.setActiveTabbar({activeTabbar: 'foster'});
				this.$nextTick(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.pay-title {
		font-size: 32rpx;
		color: #000;
	}
</style>
